<template>
  <div class="Msginfo">
    <x-header :left-options="{showBack: true,  backText:''}">我的消息</x-header>
    <section class="msglist" v-for="item in items">
      <p class="title">{{item.time}}</p>
      <div class="msg-wrap">
        <div class="content">
          <p>{{item.title}}</p>
          <p>{{item.content}}</p>
        </div>
      </div>
    </section>

    <Nodata v-if="infoShow"></Nodata>
  
  </div>
</template>

<script>
import { XHeader  } from 'vux'
import Nodata from 'components/common/Nodata'

export default {
  components: {
    XHeader,
    Nodata
  },
  data:function(){
    return {
      disabled: false,
      infoShow:false,
      items:[]
    }
  },
  created() {
    this.$http.get('/api/notifications').then(function (res) {
      this.items = res.body;
      if(this.items.length == 0){
        this.infoShow = true
      }
    })
  },
  mounted:function(){
    
  },
  methods:{
    
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';
.Msginfo{
  padding-top:54px;
  padding-bottom:15px;
}
.msglist{
  padding:0 1.5rem; 
}
.msg-wrap{
  padding:1.6rem 1.2rem;
  background-color:#fff;
  border-radius:5px;
  box-shadow:0px 0px 3px 1px #ccc;
}
.title{
  margin:1rem 0;
  padding-left:0.5rem;
  border-left:2px solid #ff4d4d;
  font-size:12px;
  color:#969696;
}
.content{
  font-size:14px;
  color:#969696;
}
.content p:nth-child(1){
  font-size:16px;
  color:#3f3f3f;
}
</style>